<template>
    <div class="Seedeptal">
 
        <div class="see-tal-int">
          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                 <th>序号</th>
                 <th>姓名</th>
                 <th>性别</th>
                 <th>年龄</th>
                 <th>学历</th>
                 <th>手机</th>
                 <th>部门</th>
                 <th>操作</th>
              </tr>
             </thead>
             <tbody>
          <tr v-for="depint in employee">
            <td>{{depint.stId}}</td>
            <td>{{depint.stName}}</td>
            <td>{{depint.stSex}}</td>
            <td>{{depint.stBirthdate}}</td>
            <td>{{depint.stDegrees}}</td>
            <td>{{depint.stTel}}</td>
            <td>{{depint.stDuties}}</td>
            
           
            <td>
              <a href="#">删除</a>
            </td>
          </tr>
             </tbody>
          </table>
        </div>
        <div class="Seepage">
          <ul>
            <li @click="home">首页</li>
            <li @click="prev">上一页</li>
            <li v-for="item of pages" class="item" :class="{active: current === item}" @click="active(item)">
                {{item}}
            </li>
            <li @click="next">下一页</li>
            <li @click="trailer">尾页</li>
            <li>共 {{pages}} 页</li>
            <li class="last">跳转 <input type="text" v-model="much"> 页</li>
        </ul>
        <button @click="goPage">确定</button>
        </div>
    </div>
    
</template>

<script>
import Axios from 'axios'
export default {
     name:'Seedeptal',
      data(){
        return{
          employee:[],
          dId:"",
          depints:[],
          count: 10,
          current: 1,
          much: '',
          content: [],
          pageContent: [],
          flag: true,
          pages:''

        }
      },
      created () {
            var url='/employee?page='+this.current
            Axios.get(url).then(response =>{
              console.log(response)
              this.employee=response.data.data
              this.pages=response.data.last_page
              console.log(this.employee)
              for(let i = 0;i < this.employee.length;i++){
                let year =this.employee[i].stBirthdate = this.employee[i].stBirthdate.split('-')[0]
                let date = new Date()
                year = date.getFullYear()-year+'岁'
                this.employee[i].stBirthdate=year
                let sex = this.employee[i].stSex
                if (sex=="1") {
                  this.employee[i].stSex="女"
                }else{
                  this.employee[i].stSex="男"
                }
              }

            })
      },
      methods: {
            active (item) {
              console.log(item);
                    this.current = item;
                 this._getData()
                },
                prev (){
                    this.current > 1 && this.current--;
                 this._getData()
                },
                next () {
                    this.current < this.pages && this.current++;
                        this._getData()
                },
                home () {
                    this.current = 1;
                     this._getData()
                },
                trailer () {
                    this.current = this.pages;
                 this._getData()
                },
                goPage () {
                    let num =  parseInt(this.much);
                    if (num >= 1 && num <= this.pages) {
                        this.current = num;
                         this._getData()
                    } else if (num > this.pages) {
                        this.current = this.page;
                         this._getData()
                    } else {
                        this.current = 1;
                       this._getData()
                    }
                },
                _getData () {
                 var url='/employee?page='+this.current
                 Axios.get(url).then(response =>{
                console.log(response)
                 this.employee=response.data.data
                 this.pages=response.data.last_page
                 console.log(this.employee)
                 })
                }
      },
      watch: {
                current () {
                    this._getData();
                },
                content () {
                    this.content.forEach(item => {
                        if (item.key === this.current) {
                            this.pageContent =  item.data
                        }
                    })
                }
            },
     components: {

        }


}
</script>
<style >
.Seedeptal{
   margin: 0 auto;
  padding-top: 20px;
    width: 80%;
    background-color: #fff;
}
.see-tal-int{
   margin: 0 auto;
  padding-top: 20px;
    width: 80%;
    background-color: #fff;
    padding-bottom: 30px;
}
.see-tal-int tr {
  height: .6rem;
  border: 1px solid #666;
}
.see-tal-int td,th{
  border-right: 1px solid #666;
}


.table-bordered {
    border: 1px solid #ddd;
}
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}
/*分页*/
        .Seepage{
          width: 15rem;
          margin: 0 auto;
        }
        li{
            list-style: none;
            float: left;
            border: 1px solid #09c;
            width: 1rem;
            height: 40px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .item{
            width: 40px;
        }
        .active{
            color: red;
        }
        input{
            width: 30px;
        }
        .last{
            width: 120px;
        }
        button {
            margin-left: 20px;
            width: 50px;
            height: 40px;
        }
</style>